import { Column, Group, Option } from '@/components/pro-panel/index.typing';
import { useNormalColumns } from './normal-columns';
import { useThreeFenceColumns } from './three-fence-columns';

enum LayerTypeEnum {
  常规线 = 1,
  '3D围栏' = 2,
}

const options: Option[] = [{ label: '颜色' }, { label: '贴图' }];

/**
 * 3D围栏
 */
export function usePanelConfig() {
  const layerType = ref(1);

  const changeLayerType = (value: number) => {
    layerType.value = value;
  };
  const formData = ref({
    effectTab: '颜色',
  });
  const { normalColumns } = useNormalColumns(formData.value, changeLayerType);
  const { threedFenceColumns } = useThreeFenceColumns(changeLayerType);

  const groups = computed(() => [
    {
      key: 'basic',
      title: '基础设置',
      collapsed: true,
    },
    {
      key: 'effect',
      title: '效果设置',
      collapsed: false,
    },
  ]);
  const columns = computed(() => {
    if (layerType.value === 1) {
      return normalColumns.value;
    }
    return threedFenceColumns.value;
  });

  return {
    groups,
    columns,
    formData,
  };
}
